<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>教务人员列表</title>
</head>
<body>
<div id="app">
    <main class="container">
        <nav>
            <ul>
                <li><strong>教务人员列表</strong></li>
            </ul>
            <ul>
                <li><a href="/dean/dean-add.html">添加</a></li>
                <li><a href="index.html">退出</a></li>
            </ul>
        </nav>

        <table>
            <thead>
            <tr>
                <th scope="col">姓名</th>
                <th scope="col">工号</th>
                <th scope="col">备注</th>
                <th scope="col">修改</th>
                <th scope="col">删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(dean, index) in deans" :key="dean.id">
                <td>{{ dean.name }}</td>
                <td>{{ dean.code }}</td>
                <td>{{ dean.remark }}</td>
                <td><a :href="getEditUrl(dean)">修改</a></td>
                <td><a :href="getDeleteUrl(dean)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </main>
</div>

<script>
    const App = {
        data() {
            return {
                deans: [],
            };
        },

        methods: {
            init() {
                const url = "/deans";
                axios.get(url)
                    .then(response => {
                        if (response.status === 200 && response.data && response.data.code === 200) {
                            this.deans = response.data.data.rows;
                        }
                    })
                    .catch(error => {
                        console.error("访问出错了：", error);
                    });
            },

            getDeleteUrl(dean) {
                return `/dean/dean-delete.html?id=${dean.id}`;
            },

            getEditUrl(dean) {
                return `/dean/dean-edit.html?id=${dean.id}`;
            },
        },
        mounted() {
            this.init();
        }
    };

    Vue.createApp(App).mount("#app");
</script>
</body>
</html>
